<template>
  <div class="mt20">
    <!-- 人员到岗情况 -- 各部门可见 -->
    <div class="title">人员到岗情况</div>
    <div class="shadow person-box m15 p20">
      <el-date-picker v-model="queryParams.day" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" @change="getCount"></el-date-picker>
      <div class="column-box mt20">
        <div class="column" v-for="(item,index) in dataList" :key="index">
          <div class="num">{{item.value}}</div>
          <div class="label">{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getCountByDay} from '@/api/home'
const fields = [{field: "userNum", label: '全部人数'}, {field: "punchCardNum", label: '打卡人数'}, {field: "overTimeNum", label: '迟到'}, {field: "leaveNum", label: '请假'}, {field: "rate", label: '到岗率'},{field: "loseCardNum", label: '未打卡'}]
export default {
  data() {
    return {
      queryParams: {},
      dataList: []
    }
  },
  mounted() {
    this.getCount()
  },
  methods: {
    async getCount() {
      try {
        const res = await getCountByDay(this.queryParams)
        const _list = []
        fields.forEach((item,index) => {
          let value = res.data && res.data[item.field] || '0'
          if(item.field == 'rate') value = value + '%'
          _list.push({
            name: item.label,
            value: value,
          })
        })

        this.dataList = _list;
      } catch (error) {

      }
    }
  }
}
</script>
